import { defineComponent, reactive } from "vue";
import PageImgTitle from "@/components/PageImgTitle";
import CardView from "@/components/CardView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ListView from "@/components/ListView";
import { ITextGroupPropsData } from "@/components/TextGroups/types";
import {
  getUserInfoUrl,
  getUserTypeValue,
  phoneClick,
} from "@/command/apiTool";
import TextView from "@/components/TextView";
import ButtonView from "@/components/ButtonView";
import Text from "@/components/Text";
import { Divider } from "vant";
import InfoCellGray from "@/components/InfoCellGray";
import FilterMenuSearch from "@/components/FilterMenuSearch";

export default defineComponent({
  name: "unsalableRecord",
  setup() {
    const form = reactive({});
    const renderItem = (e: any) => {
      const data: ITextGroupPropsData[] = [
        {
          display: getUserTypeValue() == "dh",
          name: "滞销农产品",
          value: e.produceName,
          width: "45%",
        },
        {
          display: true,
          name: "滞销数量",
          value: `${e.saleNum}kg`,
          width: "45%",
        },
        {
          display: true,
          name: "产品单价",
          value: e.price + "元",
          width: "45%",
        },
      ].filter((e: any) => e.display);
      return (
        <div class="flex flex-col w-full">
          <InfoCellGray
            {...{
              data: data,
              title:
                getUserTypeValue() == "dh"
                  ? e.name
                  : `滞销农产品: ${e.produceName}`,
              src: getUserTypeValue() == "dh" ? e.logoUrl : "",
            }}
            right={() =>
              getUserTypeValue() == "dh" ? <Text>日期: {e.date}</Text> : null
            }
          >
            <TextView>
              {getUserTypeValue() == "dh" ? e.address : e.date}
            </TextView>
            <ButtonView class="!h-[32px]" onClick={() => phoneClick(e.phone)}>
              {getUserTypeValue() == "dh" ? "联系TA" : "联系大户"}
            </ButtonView>
          </InfoCellGray>
          <Divider />
        </div>
      );
    };
    const render1 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "area", key: "code" },
        { type: "productType", key: "major", title: "农产品" },
        { type: "datePicker", key: "date" },
      ];
      return (
        <CardView>
          <FilterMenuSearch choose={data} v-model={form} searchKey="name" />
          <ListView
            {...getUserInfoUrl({
              dh: "/api/H5/sell/unsale/heavy/historyList",
              xh: "/api/H5/sell/unsale/small/applyHistoryList",
            })}
            params={form}
            renderItem={renderItem}
          />
        </CardView>
      );
    };
    return () => {
      return (
        <PageImgTitle
          title={getUserTypeValue() == "dh" ? "历史记录" : "滞销申请"}
        >
          {render1()}
        </PageImgTitle>
      );
    };
  },
});
